<template>
  <d2-container>
    <div class="voiceClone-wrap" :style="{ backgroundImage: bgImg }">
      <div class="page-middle" v-if="!startClone">
        <div class="page-middle-left">
          <el-input
            class="diy-textarea"
            type="textarea"
            placeholder="请输入需要克隆文本内容
支持（中、英、法、日、西班牙、韩语）"
            :maxlength="1000"
            show-word-limit
            v-model="sourceStr"
          >
          </el-input>
          <div class="diy-textarea-center">
            <div class="page-item-left-btn" @click="translate(false)">
              不翻译
            </div>
            <div class="page-item-left-btn" @click="languageVisible = true">翻译</div>
          </div>
          <el-input
            placeholder="请输入要生成的文本内容"
            class="diy-textarea bottom"
            type="textarea"
            :maxlength="1000"
            show-word-limit
            v-model="targetStr"
          ></el-input>
        </div>
        <div class="page-middle-right">
          <div class="middle-right-top">
            <div class="middle-title">选择音色</div>
            <el-input
              class="diy-input"
              placeholder="输入音色名称进行搜索"
              v-model="searchQuery"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="middle-list">
              <div
                class="page-single-item"
                :class="{ active: index === activeInd }"
                v-for="(item, index) in filteredItems"
                :key="index"
                @click="
                  activeAudio = item.file;
                  activeInd = index;
                "
              >
                <div class="item-right">
                  <audio
                    :src="item.file"
                    class="audio"
                    :ref="`audio${index}`"
                    @canplaythrough="audioLoad(item, index, 'audio')"
                  ></audio>
                  <div class="item-right-info">
                    <div>
                      <div
                        class="img-box"
                        
                      >
                        <img v-if="!item.play" :src="playImg" alt="" @click="playAudio(item, index, 'audio')"/>
                        <img v-else :src="pauseImg" alt="" @click="playAudio(item, index, 'audio')"/>
                      </div>
                      <div>
                        <span>{{ item.sound_name }}</span>
                        <div class="item-time">
                          {{ item.time }} — {{ item.totalTime }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- <div class="middle-right-bottom">
            <div class="middle-title">选择语言</div>
            <div class="middle-language">
              <div
                v-for="(item, index) in countrys"
                :class="{ active: lenInd === index }"
                :key="index"
                @click="lenInd = index"
              >
                <img :src="item.img" alt="" />
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div> -->
        </div>
      </div>

      <template v-if="startClone">
        <div class="page-middle-title">人声克隆生成<span></span></div>
        <div class="page-middle-subtitle">
          在Ai模型创新的同时我们更专注于提升音质，为你提供优质的听觉体验
        </div>
        <div class="page-middle single">
          <div class="page-startClone">
            <div>
              <el-input
                class="diy-textarea"
                type="textarea"
                placeholder="请输入内容"
                :maxlength="1000"
                show-word-limit
                readonly
                v-model="targetStr"
              >
              </el-input>
              <div class="diy-textarea-center">
                <div
                  class="page-item-left-btn"
                  @click="copyTextToClipboard(targetStr)"
                >
                  复制
                </div>
              </div>
              <div
                class="page-single-item"
                :class="{ active: activeSound === index }"
                v-for="(item, index) in list"
                :key="index"
                @click="activeSound = index"
              >
                <div class="item-right">
                  <audio
                    :src="item.file"
                    class="audio"
                    :ref="`audioCreate${index}`"
                    @canplaythrough="audioLoad(item, index, 'audioCreate')"
                  ></audio>
                  <div :class="`item-right-info info${index}`">
                    <img :src="recordImg" alt="" />
                    <div>
                      <div>
                        <span>{{ item.name }}</span>
                        <div class="item-time">
                          {{ item.time }} — {{ item.totalTime }}
                        </div>
                      </div>
                      <img
                        v-if="!item.play"
                        :src="playImg"
                        alt=""
                        @click="playAudio(item, index, 'audioCreate')"
                      />
                      <img
                        v-else
                        :src="pauseImg"
                        alt=""
                        @click="playAudio(item, index, 'audioCreate')"
                      />
                    </div>
                  </div>
                  <video :src="audioBg" loop muted :ref="`video${index}`"></video>
                </div>
                <div v-if="isGenerating" class="progress-text">已完成：{{progress}}    预计需要{{estimate_time}}，稍后可在任务列表中查看结果</div>
              </div>
            </div>
          </div>
        </div>
      </template>

      <div class="page-bottom">
        <div>
          <!-- <div class="page-item-left-btn cancel">取消创建</div> -->
          <div
            v-if="!startClone"
            class="page-item-left-btn"
            :class="{ disable: isGenerating }"
            @click="startAudio"
          >
            <i v-if="isGenerating" class="el-icon-loading"></i>
            开始克隆
          </div>
          <div
            v-if="startClone"
            class="page-item-left-btn"
            @click="startClone = false"
          >
            重新生成
          </div>
          <div
            v-if="startClone"
            class="page-item-left-btn"
            @click="downloadAudio"
          >
            下载音频
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      title="扣费确定"
      custom-class="shopping-dialog"
      width="485px"
      :visible.sync="dialogVisible"
      :modal-append-to-body="false"
    >
      <div>
        <!-- <el-input v-model="name" placeholder="未命名" maxlength="20" show-word-limit></el-input> -->
        <p>生成的音频消耗{{ coins }}字符</p>
        <el-checkbox v-model="checked">取消提醒</el-checkbox>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="page-item-left-btn cancel" @click="dialogVisible = false">
          取消生成
        </div>
        <div
          class="page-item-left-btn determine"
          @click="handleGenerate(); dialogVisible = false"
        >
          确认扣除
        </div>
      </span>
    </el-dialog>

    <el-dialog
      title="选择语言"
      custom-class="shopping-dialog"
      width="485px"
      :visible.sync="languageVisible"
      :modal-append-to-body="false"
    >
      <div>
        <div class="middle-language">
              <div
                v-for="(item, index) in countrys"
                :class="{ active: lenInd === index }"
                :key="index"
                @click="lenInd = index;translate(true);languageVisible = false"
              >
                <img :src="item.img" alt="" />
                <span>{{ item.name }}</span>
              </div>
            </div>

      </div>
   
    </el-dialog>
  </d2-container>
</template>

<script>
import { computed, watch } from "vue";
import { request } from "@/api/_service.js";
import util from "@/libs/util.js";
import { mapActions, mapState } from "vuex";
import { getCointypes } from "@/api/coinType.js";

export default {
  components: {},
  computed: {
    ...mapState("d2admin/user", ["info"]),
    filteredItems() {
      if (!this.searchQuery) {
        return this.voiceList;
      }
      const query = this.searchQuery.toLowerCase();
      return this.voiceList.filter((item) => {
        return item.sound_name.toLowerCase().includes(query);
      });
    },
    coins() {
      let num = 0;
      
      getCointypes().map((item) => {
        if (item.name === 'voice_clone') {
          num = item.value;
        }
      });
      return num
    }
  },
  data() {
    return {
      languageVisible: false,
      checked: false,
      dialogVisible: false,
      table_id: "",
      estimate_time: '',
      sourceStr: "",
      // targetStr: "",
      targetStr: "",
      // "Life is like a cup of tea - only by savoring it slowly can you appreciate its true flavor.",
      searchQuery: "",
      startClone: false,
      activeAudio: "",
      activeInd: null,
      isGenerating: false,
      lenInd: 0,
      activeSound: 0,
      // 背景图片
      bgImg: computed(() => {
        return `url(${process.env.VUE_APP_IMAGE}image/common/bg.jpg)`;
      }),

      recordImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/record.png`;
      }),
      audioBg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/audio-bg.mp4`;
      }),
      playImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/play.png`;
      }),
      pauseImg: computed(() => {
        return `${process.env.VUE_APP_IMAGE}image/common/pause.png`;
      }),
      messageid: "",
      list: [
      ],
      voiceList: [],
      progress: '0%',
      countrys: [
        {
          name: "中文",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/china.png`;
          }),
        },
        {
          name: "英文",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/usa.png`;
          }),
        },
        {
          name: "日语",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/japan.png`;
          }),
        },
        {
          name: "韩语",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/korea.png`;
          }),
        },
        {
          name: "法语",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/france.png`;
          }),
        },
        {
          name: "西班牙语",
          img: computed(() => {
            return `${process.env.VUE_APP_IMAGE}image/flag/spain.png`;
          }),
        },
      ],
    };
  },
  created() {
    if (this.$socket) {
      this.$socket.eventBus.$on("socket-message", (data) => {
        console.log(data);
        if (data && data.messageid == this.messageid) {
          this.progress = data.progress + "%";
          if (this.table_id && data.progress === 100) {
            if(data.status === false) {
              this.isGenerating = false;
              return this.$message.error(data.error_msg)
            } 
            request({
              url: "/mapi/sound/getSoundDetailById",
              method: "post",
              data: {
                token: util.cookies.get("token"),
                sound_type: 2,
                id: this.table_id,
              },
            })
              .then((ret) => {
                // setTimeout(() => {
                console.log(ret, "res.data.table_id");
                this.$message.success("音色克隆成功");
                this.setUserInfo();
                this.isGenerating = false;
                
                this.list.push({
                  totalTime: "00:00:00",
                  time: "00:00:00",
                  name: ret.data.sound_banks_name + " 克隆音",
                  file: ret.data.file,
                  play: false,
                  t: null,
                });
                // }, 2000);
              })
              .catch(() => {
                this.isGenerating = false;
              });
          }
        }
      });
    }
  },
  mounted() {
    request({
      url: "/mapi/soundBanks/getUserSoundBanksByUid",
      method: "post",
      data: {
        token: util.cookies.get("token"),
      },
    }).then((ret) => {
      if (ret.code === 200) {
        this.voiceList = ret.data.map((item) => {
          item.play = false;
          item.time = "00:00:00";
          item.totalTime = "00:00:00";
          item.t = null;
          return item;
        });
        // this.$message.success("您的音色库已创建成功！");
      }
    });
    request({
      url: "/mapi/sound/getLanguageList",
      method: "post",
      data: {
        // token: util.cookies.get("token"),
      },
    }).then((ret) => {
      if (ret.code === 200) {
        this.countrys = this.countrys.map((item) => {
          let value = ret.data.find((i) => i.name === item.name).value;
          return {
            ...item,
            value,
          };
        });
      }
    });
  },
  methods: {
    ...mapActions("d2admin/account", ["setUserInfo"]),
    async copyTextToClipboard(text) {
      try {
        await navigator.clipboard.writeText(text);
        console.log("Text copied to clipboard");
        this.$message.success("已复制到剪贴板");
      } catch (err) {
        console.error("Could not copy text: ", err);
        this.$message.error("复制失败");
      }
    },
    translate(boolean) {
      if (!this.sourceStr) {
        this.$message.error("请输入要要克隆的文本内容");
        return;
      }
      console.log(boolean, "boolean");
      if (boolean === false) {
        this.targetStr = this.sourceStr;
        return;
      } else {
        request({
          url: "/mapi/sound/translate",
          method: "post",
          data: {
            token: util.cookies.get("token"),
            ref_text: this.sourceStr,
            language: this.countrys[this.lenInd].value,
          },
        }).then((ret) => {
          if (ret.code === 200) {
            this.targetStr = ret.data.gen_text;
          }
        });
      }
    },
    formatTimeToHHMMSS(seconds) {
      var hours = Math.floor(seconds / 3600);
      seconds %= 3600;
      var minutes = Math.floor(seconds / 60);
      var remainingSeconds = parseInt(seconds % 60);

      return (
        hours.toString().padStart(2, "0") +
        ":" +
        minutes.toString().padStart(2, "0") +
        ":" +
        remainingSeconds.toString().padStart(2, "0")
      );
    },
    audioLoad(item, index, dom) {
      item.time = this.formatTimeToHHMMSS(0);
      item.totalTime = this.formatTimeToHHMMSS(
        this.$refs[`${dom}${index}`][0].duration
      );
      // console.log([this.$refs[`audio${index}`][0]], "audioLOad");
    },
    playAudio(item, index, dom) {
      let audio = this.$refs[`${dom}${index}`][0];
      let video = null;
      if(dom === 'audioCreate'){
        video = this.$refs[`video${index}`][0]
      }
      
      clearInterval(item.t);
      if (audio.paused) {
        (dom === 'audio' ? this.filteredItems : this.list).map((i, ind) => {
          if (index === ind) {
            item.play = true;
            audio.play();
            if(video)video.play();
            item.t = setInterval(() => {
              item.time = this.formatTimeToHHMMSS(audio.currentTime);
              if (parseInt(audio.currentTime) === parseInt(audio.duration)) {
                item.play = false;
                item.time = this.formatTimeToHHMMSS(0);
                audio.pause();
                if(video)video.pause();
                clearInterval(item.t);
              }
            }, 1000);
          } else {
            clearInterval(i.t);
            i.play = false;
            this.$refs[`${dom}${ind}`][0].pause();
            if(video)this.$refs[`video${ind}`][0].pause();
          }
        });
      } else {
        clearInterval(item.t);
        item.play = false;
        audio.pause();
        if(video)video.pause();
      }
    },
    startAudio() {
      if(this.checked){
        this.handleGenerate()
      }else{
        this.dialogVisible = true;
      }
    },
    async handleGenerate() {
      // console.log(Client,'ClientClient')
      if (this.isGenerating) return;
      if (!this.activeAudio) {
        this.$message.error("请先选择音色");
        return;
      }
      if (!this.targetStr) {
        this.$message.error("请设置需要生成内容");
        return;
      }
     
      this.list = [];

      this.list.push({
        totalTime: "00:00:00",
        time: "00:00:00",
        name: this.filteredItems[this.activeInd].sound_name + " 原音",
        file: this.filteredItems[this.activeInd].file,
        play: false,
        t: null,
      });
      this.isGenerating = true;
      this.startClone = true;
      this.messageid = new Date().getTime();
      this.$socket.send({ uid: this.info.id, messageid: this.messageid });
      request({
        url: "/mapi/sound/buildSound",
        method: "post",
        data: {
          token: util.cookies.get("token"),
          sound_type: 2,
          sound_banks_id: this.filteredItems[this.activeInd].id,
          language: this.countrys[this.lenInd].value,
          ref_text: this.sourceStr,
          gen_text: this.targetStr,
          messageid: this.messageid,
        },
      })
        .then((res) => {
          this.table_id = res.data.table_id;
          this.estimate_time = res.data.estimate_time;
        })
        .catch(() => {
          this.isGenerating = false;
        });
    },
    // 下载处理后的音频
    async downloadAudio() {
      // return console.log(this.list[this.activeSound].file,'this.list[this.activeSound].file')
      const link = document.createElement("a");
      // link.href = `${process.env.VUE_APP_MODEL}/download/${this.audioId}`;
      link.href = this.list[this.activeSound].file;
      link.download = `denoised_audio.mp3`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
  },
};
</script>

<style lang="scss" scoped>
    .progress-text{
      position: absolute;
      bottom: -30px;
      left: 0;
      // font-size: 28px;
    }
  .page-item-left-btn {
    font-size: 18px;
    width: 343px;
    height: 48px;
    line-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 27px;
    margin-bottom: 20px;
    border: 2px solid transparent;
    background: transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(131deg, #823ad7 0%, #482cd0 100%),
      linear-gradient(159deg, rgba(136, 45, 255, 1), rgba(45, 17, 178, 1));
    img {
      width: 22px;
      height: 17px;
      margin-right: 5px;
    }
    &:hover {
      background-image: linear-gradient(131deg, #823ad7 0%, #823ad7 100%),
        linear-gradient(131deg, #823ad7 0%, #823ad7 100%);
    }
    &.disable {
      // background: #ccc;
      cursor: not-allowed;
    }
    &.cancel {
      background: #541d89;
      &:hover {
        background: #6f2cad;
      }
    }
  }

  .middle-language {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        & > div {
          height: 70px;
          width: calc(100% / 3 - 6px);
          background: #160d4f;
          border-radius: 8px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 18px;
          color: rgba(255, 255, 255, 0.7);
          line-height: 25px;
          cursor: pointer;
          img {
            width: 32px;
            height: 18px;
            margin-right: 6px;
          }
          &.active,
          &:hover {
            border: 1px solid #c5bcff;
          }
        }
      }

.voiceClone-wrap {
  color: #fff;
  height: 100%;
  background-size: 100%;
  background-repeat: no-repeat;
  padding-top: 40px;
  box-sizing: border-box;
  .page-middle-title {
    font-size: 50px;
    line-height: 69px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .page-middle-subtitle {
    font-size: 24px;
    line-height: 33px;
    text-align: center;
    margin-top: 30px;
    opacity: 0.6;
  }



  .upload-demo {
    width: 400px;
    margin-bottom: 36px;
    ::v-deep(.el-upload-dragger) {
      width: 400px;
      background-color: transparent;
      border-radius: 8px;
      border: 2px dashed rgba(255, 255, 255, 0.3);
    }
    .upload-demo-content {
      padding-top: 40px;
      img {
        width: 52px;
        height: 52px;
        margin-bottom: 5px;
      }
      div {
        font-size: 18px;
        line-height: 27px;
        span {
          margin-left: 5px;
          color: #e540e8;
        }
      }
    }
  }
  .page-middle {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding-top: 40px;
    margin: 0 30px 45px;
    height: calc(100% - 100px);
    .page-middle-right {
      width: 50%;

      .middle-title {
        font-size: 24px;
        color: #ffffff;
        line-height: 37px;
        margin-bottom: 16px;
      }
     
      .diy-input {
        background: #f6f7f9;
        border-radius: 8px;
        margin-bottom: 20px;
        &::placeholder {
          color: #9ea3ad; /* 修改 placeholder 颜色 */
        }
        ::v-deep(.el-input__inner) {
          height: 45px;
          line-height: 45px;
          font-size: 14px;
          color: #333;
        }
        ::v-deep(.el-input__icon) {
          height: 45px;
          line-height: 45px;
        }
      }
      .middle-list {
        width: 100%;

        height: calc(100% - 119px);
        overflow: auto;
        & > div {
          display: inline-block;
          width: calc(50% - 4px);
          margin-right: 8px;
          margin-bottom: 8px;
          height: 70px;
          cursor: pointer;
          &.active,
          &:hover {
            border: 2px solid #fff;
            border-radius: 8px;
          }
          // margin-bottom: 8px;
          .item-right {
            border-radius: 8px;
            display: flex;
            justify-content: space-between;
            height: 100%;
            .item-right-info {
              height: 100%;
              width: 100%;
              position: relative;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 14px;
              color: rgba(255, 255, 255, 0.7);
              line-height: 20px;
              padding: 5px 6px;
              & > div {
                width: 100%;
                position: relative;
                z-index: 5;
                display: flex;
                // justify-content: space-between;
                align-items: center;
                line-height: 20px;
                .img-box {
                  width: 60px;
                  height: 60px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  cursor: pointer;
                  background: rgb(78, 60, 210, 0.2);
                  border-radius: 8px;
                  margin-right: 7px;
                  img {
                    width: 32px;
                    height: 32px;
                  }
                }

                .item-time {
                  opacity: 0.6;
                  margin-top: 6px;
                  font-size: 12px;
                }
              }
              &::before {
                content: "";
                border-radius: 8px;
                overflow: hidden;
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                background: rgba(32, 18, 98, 0.6);
                backdrop-filter: blur(10px);
                z-index: 1;
              }
            }
          }
        }
        & > div:nth-child(2n) {
          margin-right: 0;
        }
      }
    }
    .page-middle-left,
    .middle-right-top,
    .page-startClone,
    .middle-right-bottom {
      position: relative;
      // overflow: hidden;
      width: 50%;
      height: 100%;
      // margin-right: 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 1;
      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: 18px;
        border: 1px solid transparent;
        background-clip: padding-box, border-box;
        background-origin: padding-box, border-box;
        background-image: linear-gradient(
            157deg,
            RGBA(3, 2, 20, 1) 0%,
            RGBA(7, 5, 33, 1) 100%
          ),
          linear-gradient(180deg, rgba(82, 41, 169, 1), rgba(30, 17, 101, 1));
        backdrop-filter: blur(10px);
        z-index: -1;
        opacity: 0.8;
      }

      &.page-middle-left {
        padding: 20px;

        &::before {
          background-image: linear-gradient(
              157deg,
              rgb(16, 9, 71) 0%,
              rgb(16, 9, 71) 100%
            ),
            linear-gradient(180deg, rgba(82, 41, 169, 1), rgba(30, 17, 101, 1));
          opacity: 0.9;
        }
      }

      &.middle-right-top {
        width: 100%;
        // height: calc(100% - 303px);
        height: 100%;
        margin-bottom: 30px;
        align-items: flex-start;
        padding: 30px 20px;
      }
      &.middle-right-bottom {
        width: 100%;
        height: 273px;
        align-items: flex-start;
        padding: 30px 20px;
      }

      &.page-startClone {
        padding: 30px;
        & > div {
          width: 100%;
          height: 100%;
          overflow: auto;
          .diy-textarea {
            height: 100px;
            ::v-deep(.el-input__count) {
              right: 94px;
            }
          }
        }
      }

      .diy-textarea-center {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 100%;
        height: 70px;
        border-bottom: 1px solid rgb(142, 115, 201, 0.7);
        .page-item-left-btn {
          margin: 0;
          margin-left: 12px;
          width: 85px;
          height: 32px;
          line-height: 32px;
          font-size: 13px;
          border-radius: 8px;
          color: rgba(255, 255, 255, 0.8);
          background-image: linear-gradient(177deg, #2b186e 0%, #120c69 99%),
            linear-gradient(164deg, rgba(67, 39, 165, 1), rgba(25, 14, 159, 1));
          &:hover {
            background-image: linear-gradient(
              164deg,
              rgba(67, 39, 165, 1),
              rgba(25, 14, 159, 1)
            );
          }
        }
      }
      .diy-textarea {
        height: calc(50% - 35px);
        overflow: auto;
        ::v-deep(.el-textarea__inner) {
          height: 100%;
          background-color: transparent;
          border: none;
          font-size: 16px;
          color: #ffffff;
          line-height: 32px;
        }
        ::v-deep(.el-input__count) {
          background-color: transparent;
          font-size: 14px;
          color: #ffffff;
          line-height: 20px;
          right: 20px;
          bottom: 0px;
        }
        &.bottom {
          padding-top: 20px;
          ::v-deep(.el-input__count) {
            right: 20px;
            bottom: 0px;
          }
        }
      }
    }
    &.single {
      width: auto;
      margin: 0 44px 45px;
      height: calc(100% - 234px);
      display: flex;
      padding-top: 40px;

      .diy-textarea-center {
        margin-bottom: 25px;
        border: none;
      }
      & > div {
        width: 100%;
        height: 100%;
        padding: 30px 50px;
        // overflow: auto;
        margin: 0;
        .page-single-item {
          width: 100%;
          height: 111px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 54px;
          cursor: pointer;
          position: relative;
          &.active {
            .item-check {
              border: 1px solid transparent;
              background-clip: padding-box, border-box;
              background-origin: padding-box, border-box;
              background-image: none;
              background-image: linear-gradient(177deg, #2b186e 0%, #120c69 99%),
                linear-gradient(
                  164deg,
                  rgba(67, 39, 165, 1),
                  rgba(25, 14, 159, 1)
                );
              &::before {
                content: "✔";
                font-size: 20px;
              }
            }
            .item-right {
              border: 2px solid #fff;
            }
          }
          .item-check {
            width: 30px;
            height: 30px;
            margin-right: 18px;
            border-radius: 50%;
            border: 1px solid #4a2edc;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .item-right {
            // width: calc(100% - 48px);
            border-radius: 10px;
            display: flex;
            justify-content: space-between;

            .item-right-info {
              width: 266px;
              position: relative;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-size: 18px;
              padding: 24px 20px 30px;
              & > div {
                width: 100%;
                position: relative;
                z-index: 5;
                display: flex;
                justify-content: space-between;
                align-items: center;
                line-height: 20px;
                // div
                img {
                  width: 40px;
                  height: 40px;
                  cursor: pointer;
                }
                .item-time {
                  opacity: 0.6;
                  margin-top: 10px;
                }
              }
              &::before {
                content: "";
                border-radius: 10px 0 0 10px;
                overflow: hidden;
                position: absolute;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                background: rgba(32, 18, 98, 0.6);
                backdrop-filter: blur(10px);
                z-index: 1;
              }

              &.info1 {
                &::before {
                  background: rgba(101, 255, 221, 0.6);
                }
              }
              & > img {
                position: absolute;
                left: 10px;
                top: -25px;
                width: 122px;
                height: 122px;
                z-index: -1;
              }
            }
            video {
              border-radius: 0 10px 10px 0;
              flex: 1;
              width: calc(100% - 266px);
              height: 107px;
              object-fit: cover; /* 确保视频内容填满标签 */
            }
          }
        }
      }
    }
  }

  .page-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 44px;

    div {
      display: flex;
      div {
        width: 150px;
        margin: 0;
        margin-left: 24px;
      }
    }
  }
}

::v-deep(.shopping-dialog) {
  background: transparent;
  padding: 0;
  color: #fff;

  min-height: 228px;
  border-radius: 24px;
  border: 1px solid transparent;
  background: transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(
      203deg,
      RGBA(24, 49, 117, 0.9) 0%,
      RGBA(16, 13, 52, 0.9) 30%,
      RGBA(16, 13, 52, 0.9) 70%,
      RGBA(65, 18, 102, 0.9) 100%
    ),
    linear-gradient(167deg, rgba(55, 55, 255, 1), rgba(39, 176, 255, 1));
  font-size: 18px;
  line-height: 25px;
  .el-dialog__body {
    padding: 20px 26px;
    position: relative;
    p{
      font-size: 18px;
      line-height: 25px;
      color: #fff;
      text-align: center;
    }
    .el-checkbox{
      position: absolute;
      left: 42%;
      bottom: -3px;
    }
    .el-checkbox__label{
      color: rgba(255, 255, 255, 0.70);
    }
  
  }
  .el-dialog__header {
    .el-dialog__title {
      color: #fff;
      font-size: 20px;
    }
  }
  .el-dialog__footer {
    padding: 20px 20px 0px;
  }
  .dialog-footer {
    display: flex;
    justify-content: center;
    .page-item-left-btn {
      width: 118px;
      height: 40px;
      margin-left: 20px;
      font-size: 17px;
      line-height: 20px;
    }
  }
  .el-dialog__headerbtn {
    // top: -20px;
    // right: -40px;
    .el-icon-close {
      color: #fff;
      font-size: 22px;
    }
  }
}
</style>
